<template>
  <div class="wap-container manQualityHome" id="container">
    <section class="nav bgfff">
      <ul class="">
        <li v-bind:class="{markBlue: Gparam.bar===1}" @click="jumpBar(1)">待派单</li>
        <li v-bind:class="{markBlue: Gparam.bar===2}" @click="jumpBar(2)">待质检<i class="markNew" v-if="Gparam.chuliNew > 0">{{Gparam.chuliNew}}</i></li>
      </ul>
    </section>

    <section class="bottom mr10 ml10 pb20">
      <ul>
        <li v-for="item in rows">
          <div class="creatTime">{{item.createdTime}}</div>
          <div class="order-info" @click="jumpPage(item.systemStatus,item.id,item)">
            <ul class="pl20 pb15">
              <li class="rowflex">
                <div class="info-item c666 ">工单编号</div>
                <div>{{item.code}}</div>
              </li>
              <li class="rowflex">
                <div class="info-item c666 letterSpacing">联系人</div>
                <div>{{item.linkMan}}</div>
              </li>
              <li class="rowflex">
                <div class="info-item c666">联系电话</div>
                <div>{{item.linkPhone}}</div>
              </li>
              <li v-if="item.errorDescription" class="rowflex">
                <div class="info-item c666 ">报修内容</div>
                <div class="repair-content">{{item.errorDescription}}</div>
              </li>
              <li class="rowflex">
                <div class="info-item c666">工单状态</div>
                <div v-if="item.systemStatus === 0">待派发</div>
                <div v-if="item.systemStatus === 1">待接单</div>
                <div v-if="item.systemStatus === 2">预约中</div>
                <div v-if="item.systemStatus === 3">待出发</div>
                <div v-if="item.systemStatus === 4">行程中</div>
                <div v-if="item.systemStatus === 5">处理中</div>
                <div v-if="item.systemStatus === 6">待质检</div>
                <div v-if="item.systemStatus === 7">处理完成</div>
                <div v-if="item.systemStatus === 8">报销中</div>
                <div v-if="item.systemStatus === 9">待归档</div>
                <div v-if="item.systemStatus === 10">归档</div>
                <div v-if="item.systemStatus === 11">删除</div>
              </li>
              <div v-if="item.systemStatus === 1" class="status">接单</div>
              <div v-if="item.systemStatus < 6 && item.systemStatus >1" class="status">处理</div>
              <!--<div v-if="item.systemStatus === 7" class="status">完成</div>-->
            </ul>
          </div>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
  export default {
    name: "ManQualityHome",
    data(){
      return {
        Gparam: {
          bar: 1,
          jiedanNew: 0,
          chuliNew: 0,
          wanchengNew: 0,
        },
        userInfo: {},
        rows: [],
        allRows: [],
        qualityRows: [],
        distributeRows: [],
        wanchengRows: [],
      }
    },
    methods: {
      jumpBar: function (num){
        this.Gparam.bar = num
        if(num == 1){
          this.Gparam.jiedanNew = 0
          this.rows = this.distributeRows
        } else if(num==2){
          this.Gparam.chuliNew = 0
          this.rows = this.qualityRows
        }
      },
      jumpPage: function (status,id,item) {
        if(status === 6){ // 待质检
          // this.$router.push({path: '/user/orderAppraiseHome',query: {orderId: id}})
          // this.$router.push("/user/orderAppraiseHome")
          this.$router.push({path: '/management/manQualityServiceItem',query: {orderId: id}})
        } else if(status === 0){
          this.$router.push({path: '/management/manDistributeOrder',query: {orderInfo: item}})
        }
      },
    },
    mounted(){
      this.$getUserInfo().then(user=>{
        this.userInfo = user
        let data = {
          search: {
            fields: this.userInfo.id
          }
        }
        console.log(data)
        this.$http.get('/work/api/workorder/?noPage=true').then(res=>{
            for (let i = 0; i < res.data.data.length; i++){
              if(res.data.data[i].systemStatus === 6 ){
                this.qualityRows.push(res.data.data[i])
              } else if(res.data.data[i].systemStatus === 0 ){
                this.distributeRows.push(res.data.data[i])
              }
              this.rows = this.distributeRows
            }
            if(this.rows.length === 0){
              // var div=document.createElement("div");
              // div.innerText = "暂无需质检工单";
              // document.body.appendChild(div);
              // document.body.insertBefore(div, document.body.firstElementChild);
            }
          }
        )
      })
    },
  }
</script>

<style lang="less">
  .manQualityHome {
    font-size: 0.13rem;

    .nav {
      height: 0.4rem;
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 2;
    }

    .nav ul {
      display: flex;
      justify-content: space-around;
      line-height: 0.4rem;
      font-size: 0.16rem;
      text-align: center;
      color: #666;
    }

    .nav ul li {
      width: 0.6rem;
    }

    .markBlue {
      color: #42a3fd !important;
      border-bottom: solid 0.01rem #42a3fd;
    }

    .markNew {
      display: block;
      width: 0.12rem;
      height: 0.12rem;
      background-color: #fa4a38;
      font-size: 0.08rem;
      border-radius: 0.12rem;
      line-height: 1;
      margin-top: -0.04rem;
      margin-left: 0.55rem;
      position: absolute;
      top: 0.1rem;
      color: #fff;
    }

    .order-info {
      font-size: 0.15rem;
      background-color: #fff;
      padding-top: 0.05rem;
      margin-top: 0.1rem;
      border-radius: 0.04rem;
      box-shadow: 0 0.02rem 0.04rem 0 #ebebeb;
      position: relative;
    }

    .order-info ul {

    }

    .order-info ul li {
      margin-top: 0.15rem;
      line-height: 0.15rem;
    }

    .repair-content {
      width: 2.5rem;
      line-height: normal;
      margin-top: -0.03rem;
    }

    .order-info .info-item {
      width: 0.75rem;
    }

    .order-info .status {
      font-size: 0.1rem;
      width: 0.6rem;
      height: 0.2rem;
      line-height: 0.2rem;
      border-radius: 0.2rem;
      text-align: center;
      top: 0.2rem;
      right: 0.1rem;
      background-color: #fa4a38;
      color: #fff;
      position: absolute;
    }

    ul li .creatTime {
      background-color: #d3d3d3;
      display: inline-block;
      padding: 0 0.08rem;
      border-radius: 0.04rem;
      font-size: 0.1rem;
      color: #fff;
      margin-left: 50%;
      transform: translateX(-50%);
      margin-top: 0.2rem;
    }
    .bottom{
      margin-top: 0.4rem;
    }
  }
</style>
